<template>
	<view>
		<view class="login-box">

			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="nav_item" v-show="isActive==0">
				<view class="log-box">
					<u--form labelPosition="left" :model="model1" :rules="rules">
						<img class='cell' src='http://127.0.0.1:7001/public/whj/shouji.png' />
						<u-form-item prop="userInfo.username" borderBottom ref="item1">
							<u--input placeholder="请输入您的手机号" v-model="model1.userInfo.username" border="none">
							</u--input>
							<view v-if="isshow" class="get-code" @click.stop="getCode1()">{{getCodeText}}</view>
						</u-form-item>

						<u-form-item v-if="isshow1" style='margin-top: 20px;' prop="userInfo.password" borderBottom
							ref="item1">
							<img class='cell1' src='http://127.0.0.1:7001/public/whj/suo.png' />
							<u--input type='password' placeholder="请输入您的密码" v-model="model1.userInfo.password"
								border="none"></u--input>
						</u-form-item>
						<u-form-item v-if="isshow" style='margin-top: 20px;' prop="userInfo.code" borderBottom
							ref="item1">
							<img class='cell1' src='http://127.0.0.1:7001/public/whj/suo.png' />
							<u--input placeholder="请输入您收到的验证码" v-model="model1.userInfo.code" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<button class="tijiao" @click="Signin()">登录</button>
				<span @click='isShow()' v-if="isshow1" class='verifica'>通过短信验证码登录</span>
				<span @click='isShow()' v-if="isshow" class='verifica1'>通过密码登录</span>
			</view>
			<view class="nav_item" v-show="isActive==1">
				<view class="log-box1">
					<u--form labelPosition="left" :model="model" :rules="rules1">
						<img class='cell' src='http://127.0.0.1:7001/public/whj/shouji.png' />
						<u-form-item prop="user.username1" borderBottom ref="item1">
							<u--input placeholder="请输入您的手机号" v-model="model.user.username1" border="none">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange1" seconds="20" changeText="X秒重新获取"></u-code>
									<u-button class='yz' @tap="getCode" :text="tips" type="success" size="mini">
									</u-button>
								</template>
							</u--input>
						</u-form-item>

						<u-form-item prop="user.code1" borderBottom ref="item1">
							<u--input placeholder="请输入您收到的验证码" v-model="model.user.code1" border="none">

							</u--input>
						</u-form-item>

						<u-form-item prop="user.password1" borderBottom ref="item1">
							<img class='cell2' src='http://127.0.0.1:7001/public/whj/suo.png' />
							<u--input type='password' placeholder="请输入您的密码" v-model="model.user.password1"
								border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<button @click="register()" class="tijiao1">注册</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qlist: [],
				tips: '',
				isActive: 0,
				getList: [],
				navList: [{
					index: 0,
					title: '登录'
				}, {
					index: 1,
					title: "注册"
				}],
				model1: {
					userInfo: {
						username: '',
						password: '',
						code: ''
					},
				},
				model: {
					user: {
						username1: '',
						password1: '',
						code1: ''
					},
				},
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						len: 11,
						message: '请输入正确手机号',
						trigger: ['blur']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入正确密码',
						trigger: ['blur'],
					},
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 4,
						message: '请输入正确的验证码',
						trigger: ['blur'],
					}

				},
				rules1: {
					'user.username1': {
						type: 'string',
						required: true,
						len: 11,
						message: '请输入正确手机号',
						trigger: ['blur']
					},
					'user.password1': {
						type: 'string',
						required: true,
						message: '请输入正确密码',
						trigger: ['blur'],
					},
					'user.code1': {
						type: 'string',
						required: true,
						len: 4,
						message: '请输入正确的验证码',
						trigger: ['blur'],
					}

				},
				isshow: false,
				isshow1: true,
				yzm: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				logyz: ''

			}
		},
		onLoad() {
			this.$api.getUser().then(res => {
				this.getList = res.data
				// console.log(this.getList)
			})
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
			isShow() {
				this.isshow = !this.isshow
				this.isshow1 = !this.isshow1
			},
			codeChange1(text) {
				this.tips = text;
			},
			getCode1() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.model1.userInfo.username))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {

					//示例默认1234，生产中请删除这一句。
					this.logyz = parseInt(Math.random() * 10000); //发送验证码，进行填入
					console.log(this.logyz)
					this.setTimer(); //调用定时器方法
					uni.showToast({
						title: `验证码为${this.logyz}`,
						icon: "none"
					}); //弹出提示框
				}, 1000)
			},
			setTimer() {
				let holdTime = 20; //定义变量并赋值
				this.getCodeText = "重新获取(20)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},

			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正获取验证码'
					})
					console.log(this.tips)
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.model.user.username1))) { //校验手机号码是否有误
						uni.showToast({
							title: '请填写正确手机号码',
							icon: "none"
						});
						return false;
					}
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖	
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.yzm = parseInt(Math.random() * 10000)
						console.log(this.yzm)
						uni.showToast({
							title: `验证码为${this.yzm}`,
							icon: "none"
						});
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}





			},
			change(e) {
				console.log('change', e);
			},
			register() {
				console.log(this.model.user.username1);
				if (this.model.user.username1.length !== 11) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					});
				} else {
					if (this.model.user.username1 !== '' && this.model.user.password1 !== '') {
						if (this.model.user.code1 == this.yzm && this.model.user.code1 !== '') {
							let a = {
								username: this.model.user.username1,
								password: this.model.user.password1
							}
							this.$api.searchUser({
								username: this.model.user.username1
							}).then((res) => {
								if (res.data.length == 0) {
									this.$api.adduser(a).then(res => {
										uni.showToast({
											title: '注册成功',
											icon: "none"
										});
									})

								} else {
									uni.showToast({
										title: '手机号已经注册',
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '验证码错误',
								icon: "none"
							});
						}
					}
				}




			},
			Signin() {
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.model1.userInfo.username))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.$api.searchUser({
					username: this.model1.userInfo.username,
				}).then(res => {
					this.qlist = res.data
					if (this.qlist.length == 0) {
						uni.showToast({
							title: '手机号未注册',
							icon: "none"
						});
					}
					res.data.forEach(item => {
						if (this.model1.userInfo.username == item.username && this.model1.userInfo
							.password == item.password || this.model1.userInfo.username == item.username &&
							this.model1.userInfo.code == this.logyz) {
							getApp().globalData.username = this.model1.userInfo.username,
								this.$api.getTcygUserId(res.data[0].id).then(item => {
									if (item.data.length == 0) {
										this.$api.postTcyg({
											userName: '新建用户',
											userImg: 'http://127.0.0.1:7001/public/newAvatar.png',
											userSign: '未编辑签名',
											followSize: "[]",
											fansSize: "[]",
											dianzanSize: "0",
											userId: res.data[0].id
										}).then(aaa => {
											// console.log(res.data[0].id)
											getApp().globalData.userId = res.data[0].id
											uni.switchTab({
												url: '/pages/Home/Home'
											})
										})
									} else {
										// console.log(item.data[0].userId)
										getApp().globalData.userId = item.data[0].userId
										uni.switchTab({
											url: '/pages/Home/Home'
										})
									}
								})

						} else {
							uni.showToast({
								title: '手机号或密码错误',
								icon: "none"
							});
						}
					})
				})
				var obj = {
					username: this.model1.userInfo.username,
					password: this.model1.userInfo.password
				}
				this.$api.login(obj).then(res => {
					// console.log(res.data.token)
					localStorage.setItem('token', res.data.token)
				})
			}
		}
	}
</script>

</script>

<style>
	.login-box {
		width: 100%;
		height: 1000upx;
		background: #ffffff;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 1px 1px 4px #999;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: ;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 375upx;
		height: 2rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
		background: #28d2d1;
	}

	.log-box {
		width: 70%;
		height: 270upx;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		margin: 0 auto;
		position: relative;
		margin-top: 100upx;
		background: white;
	}

	.log-box1 {
		width: 70%;
		/* height: 355upx; */
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		margin: 0 auto;
		position: relative;
		margin-top: 100upx;
		background: white;
	}

	.cell {
		width: 40upx;
		height: 55upx;
		position: absolute;
		top: 14px;
		left: -34px;
	}

	.cell1 {
		width: 38upx;
		height: 46upx;
		position: absolute;
		top: 83px;
		left: -34px;
	}

	.cell2 {
		width: 38upx;
		height: 46upx;
		position: absolute;
		top: 103px;
		left: -34px;
	}

	.tijiao {
		width: 90%;
		height: 80upx;
		border-radius: 30px;
		border: none;
		background: #36dcaa;
		color: white;
	}

	.tijiao1 {
		width: 90%;
		height: 80upx;
		border-radius: 30px;
		margin-top: 6%;
		border: none;
		background: #36dcaa;
		color: white;
	}

	.verifica {
		font-size: 24upx;
		color: #4addcc;
		display: block;
		margin-top: 4%;
		margin-left: 66%
	}

	.verifica1 {
		font-size: 24upx;
		color: #4addcc;
		display: block;
		margin-top: 4%;
		margin-left: 75%
	}

	.yz {
		width: 140upx;
		height: 50upx;
		border-radius: 5px;
	}

	.get-code {
		width: 140upx;
		height: 50upx;
		border-radius: 5px;
		background-color: #5ac725;
		color: white;
		font-size: 12px;
		text-align: center;
		line-height: 50upx;
	}
</style>
